<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock {
            height: 500px;
            width: 500px;
            border-radius: 50%;
            border: 10px solid red;
            position: relative;
        }
        .scale {
            font-size: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
    </style>
</head>
<body>
    <div class="clock">
        <div class="scale">12</div>
        <div class="scale">1</div>
        <div class="scale">2</div>
        <div class="scale">3</div>
        <div class="scale">4</div>
        <div class="scale">5</div>
        <div class="scale">6</div>
        <div class="scale">7</div>
        <div class="scale">8</div>
        <div class="scale">9</div>
        <div class="scale">10</div>
        <div class="scale">11</div>
    </div>
    <script>
        var scaleList = document.querySelectorAll('.scale');
        var r = 180;
        
        for (var i = 0; i < scaleList.length; i++) {
            var alpha = 30 * i;
            var currentElement = scaleList[i];
            currentElement.setAttribute('style', `transform: 
                translate(-50%, -50%) 
                rotate(${ alpha }deg)
                translateY(-200px)
                rotate(${ -alpha }deg);
            `);
        }

    </script>
    
</body>
</html>